<template>
  <n-form>
    <n-form-item label="付款账户" path="paymentAccount">
      <n-select v-model:value="formData.paymentAccount" placeholder="Select" :options="paymentAccountOptions" />
    </n-form-item>
    <n-form-item label="收款账户" path="accountsReceivable">
      <n-input-group>
        <n-select :style="{ width: '25%' }" :options="accountsReceivableOptions" />
        <n-input v-model:value="formData.accountsReceivable" placeholder="Input" />
      </n-input-group>
    </n-form-item>
    <n-form-item label="收款人姓名" path="payeeName">
      <n-input v-model:value="formData.payeeName" placeholder="Input" />
    </n-form-item>
    <n-form-item label="转账金额" path="amount">
      <n-input v-model:value="formData.amount" placeholder="Input" />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="nextStep">下一步</n-button>
    </n-form-item>
  </n-form>
</template>

<script setup>
import { reactive } from 'vue';
const emits = defineEmits(['nextStep']);
const formData = reactive({
  paymentAccount: '',
  accountsReceivable: '',
  payeeName: '',
  amount: '',
});
const accountsReceivableOptions = [
  { label: '支付宝', value: 'alipay' },
  { label: '银行账户', value: 'bankAccount' },
];
const paymentAccountOptions = [{ label: 'yang', value: 'yang' }];

const nextStep = () => {
  emits('nextStep');
};
</script>

<style scoped></style>
